<template>
  <div>
    login

    <!-- <img class="sdde" :src="`${publicPath}imges/but_play.png`" /> -->
    <pre>
      <code class="language-javascript">

                function foo() {
                    var i = 3;
                }
         
          /**
            * SyntaxHighlighter
            */
            function foo() {
                if (counter >= 10)
                    return;
                // it works!
            }
      </code>
         </pre>
    <button @click="handle">变化</button>
  </div>
</template>

<script>
// import { syntaxhighlighter } from "./syntaxhighlighter.js"
// import "highlight.js/styles/googlecode.css"
import hljs from "@hjs/highlight.pack.js" //导入代码高亮文件

export default {
  data() {
    return {
      publicPath: process.env.BASE_URL,
      // syntaxhighlighter: syntaxhighlighter,
    }
  },
  methods: {
    async handle() {
      // await syntaxhighlighter()
      // window.SyntaxHighlighter.all()
    },
  },
  //   beforeCreate() {
  //     syntaxhighlighter();
  //     window.SyntaxHighlighter.all();
  //   },
  mounted() {
    document.querySelectorAll("pre code").forEach(block => {
      console.log(hljs)
      hljs.highlightBlock(block)
    })
    // window.location.reload()
  },
  async created() {
    // console.log('初始化')
    // await syntaxhighlighter()
    // window.SyntaxHighlighter.all()
    // 刷新才能生效 todo
  },
}
</script>
<style lang="less">
@import "~@hjs/styles/an-old-hope.css";
</style>
